<template>
  <div>

    <el-row>

      <el-col :span="20" :offset="2">
        <h3 style="text-align: left;margin-top:20px;color: #8c939d">未转正的实习生</h3>
        <div class="grid-content bg-purple-light">
          <template>
            <el-table
              height="450"
              :data="tableData"
              style="width: 100%;margin-top: 20px">
              <el-table-column
                prop="part"
                label="部门"
                width="140">
              </el-table-column>
              <el-table-column
                prop="position"
                label="职位"
              >
              </el-table-column>
              <el-table-column
                prop="label"
                label="姓名">
              </el-table-column>
              <el-table-column
                prop="intime"
                label="入职时间">
              </el-table-column>
              <el-table-column
                label="操作"
                width="120"
              >
                <template slot-scope="scope">
                  <el-button
                    type="success"
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">确定转正
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <div class="pagenation">
            <el-pagination
              small
              layout="prev, pager, next"
              :total="total"
              :page-size="page_size"
              @prev-click="prevfun"
              @next-click="nextfun"
              @current-change="currentchange"
            >
            </el-pagination>
          </div>
        </div>

      </el-col>
    </el-row>

    <el-dialog title="转正后职位" :visible.sync="dialogFormVisible"
    :before-close="handleClose"
    >
      <el-form :model="form">
        <el-form-item label="员工名字" label-width="100px">
          <el-input v-model="row.label" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="转正后职位" label-width="100px">
          <el-select v-model="positione_id" placeholder="请选择职位">
            <el-option v-for="item in form" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'PositiveStaffView',
    data () {
      return {
        row: '',
        dialogFormVisible: false,
        form: [],
        positione_id: '',
        tableData: [],
        current_page: '',
        page_size: '',
        total: '',
        formLabelWidth: '120px',
        dialogVisible: false,
      }
    },
    mounted () {
      this.get_evection()
    },
    methods: {
      //修改车辆
      handleEdit (index, row) {
        this.dialogFormVisible = true
        this.row = row
        this.$axios({
          url: this.$settings.base_url + `/user/partforpositive/?id=${row.part_id}`,
          method: 'get'
        }).then(res => {
          if (res.data.code === 100) {
            this.form = res.data.data
          } else {
            this.$message.error('获取数据失败')
          }
        })
      },
      handleClose(done){
        //对话框关闭前，重置
        this.positione_id=''
        done()
      },
      cancel(){
        this.dialogFormVisible=false
        this.positione_id=''
      },

      submitEdit () {
        var user_id = this.row.value
        var position_id = this.positione_id
        this.$axios({
          url: this.$settings.base_url + `/user/positive/`,
          method: 'patch',
          data:{'id':user_id,'position':position_id}
        }).then(res => {
          if (res.data.code === 100) {
            this.$message.success('修改成功')
            this.get_evection(this.curren_page)
            this.form = []
            this.positione_id=''
            this.dialogFormVisible = false
          } else {
            this.$message.error('修改失败')
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      },
      //获取车辆数据
      get_evection (page = 1) {
        this.$axios({
          url: this.$settings.base_url + `/user/positive/?page=${page}`,
          method: 'get'        //type=page表明要获取的时带分页器功能的数据,type=all,代表获取所有的数据
        }).then(res => {
          this.tableData = res.data.results
          this.page_size = res.data.page_size
          this.total = res.data.count
        })
      },
      prevfun (value) {
        //value拿到的当前的页码,不用传递，内置的函数，自动传递要前往的页码
        this.get_evection(value)
      },
      nextfun (value) {
        //value拿到页码
        this.get_evection(value)
      },
      currentchange (value) {
        this.current_page = value
        this.get_evection(value)

      },
      //
    }
  }
</script>

<style scoped>

</style>
